<template>
  <h1>组合式API</h1>

  <h2>APP 组件 --- {{ num }}</h2>

  <button @click="addNum">点击修改 num</button>
</template>

<script setup>
import { ref,reactive } from 'vue';
//  当前 num 的值是一个 普通的数字, 不是响应式数据, 所以修改 num 不会让页面发生变化
//  除非我们将 num 修改为 响应式数据
const num = ref(100)
// console.log(num.value)//注意需要.value

const obj = ref({
  name:"张三",
  age:18,
  id:"QF001",
})
// console.log('obj', obj)
// console.log('obj.value', obj.value)
// console.log('obj.value.name', obj.value.name)
// console.log('obj.value.age', obj.value.age)
// console.log('obj.value.id', obj.value.id)

const info = reactive({
  id:'xf001',
  name:"苹果",
  price:100,
  number:20
})
console.log(info)
// 下边的写法, 不会导致 info 失去响应式
info.name = '橘子'
info.price = 50 

function addNum(){
  num.value++
  console.log("num 最新的值: ", num.value);
}

</script>